<script setup>
import { ref } from "vue";

import { Search ,SwitchButton,User} from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/stores/user";


const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const title = ref("");

console.log(userStore.information.avatar)


const search = async () => {
  // if(router)
  router.push({
    path: "/home",

    query: {
      title: title.value,
    },
  });
};

const logout = () => {
  ElMessageBox.confirm("确认退出?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.removeToken();
      userStore.removeUserId();
      userStore.removeInformation();
      router.push("/login");
    })
    .catch(() => {

    });
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu
          :default-active="route.path"
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <div style="padding: 7px; padding-left: 15px">
            <img
              style="width: 60px"
              src="@/assets/logo.jpg"
              alt="言智空间"
            />
          </div>
          <div style="margin-left: 400px; height: auto; margin-top: 15px">
            <el-input
              v-model="title"
              style="width: 300px"
              placeholder="输入标题"
            />
            <el-button
              @click="search"
              style="margin-left: 5px"
              :icon="Search"
            />
          </div>
          <div class="flex-grow" />
          <el-menu-item index="/home">主页</el-menu-item>
          <el-menu-item index="/releaseDynamic">发布动态</el-menu-item>
          <el-menu-item index="/personalCenter">个人中心</el-menu-item>
          <el-menu-item index="/messagePage">消息通知</el-menu-item>
          <el-sub-menu  index="2">
            <template #title>
              <img width="38px" v-if="userStore.information.avatar!='default.jpg'" :src="userStore.information.avatar">
              <img v-else width="38px" src="@/assets/boy.jpg" />
              <!-- <el-avatar  :size="40" src="@/assets/boy.jpg" /> -->
              <span style="padding-left: 10px;">{{ userStore.information.userName}}</span>
            </template>
            <el-menu-item index="/myInformationLayout"><el-icon><User /></el-icon>个人资料</el-menu-item>
            <el-menu-item @click="logout" ><el-icon><SwitchButton /></el-icon>退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
        
      </el-header>

      <el-main style="min-height: 800px;margin-bottom: 100px;">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<style>
.flex-grow {
  flex-grow: 1;
}
</style>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>
